<template>
	<view class="userInfo">
		<u-navbar
		title=" " 
		:is-back="false"
		title-size="34"
		:border-bottom="false"
		:background="background">
			<view class="header">
				<u-icon name="arrow-left" size="28" @tap="black"></u-icon>
				<view class="title">编辑资料</view>
				<view class="ritbtn">保存</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="item">
				<view class="title">头像</view>
				<u-upload :custom-btn="true" :show-upload-list="false">
					<view slot="addBtn" class="slot-btn">
						<image class="avatar" :src="form.avatar" mode="aspectFill"></image>
					</view>
				</u-upload>
			</view>
			<view class="item">
				<view class="title">性别</view>
				<view class="right_cont">
					<u-input v-model="form.sex" type="select" @click="sex_show = true" />
					<u-action-sheet :list="sexList" v-model="sex_show" @click="sexCallback"></u-action-sheet>
				</view>
			</view>
			<view class="item">
				<view class="title">昵称</view>
				<view class="right_cont">
					<u-input v-model="form.name" type="text" placeholder="请输入昵称"/>
					<u-icon class="u-m-l-15" name="arrow-right" color="#888888" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="item">
				<view class="title">手机号</view>
				<view class="right_cont">
					<u-input v-model="form.tel" type="number" placeholder="请输入手机号"/>
					<u-icon class="u-m-l-15" name="arrow-right" color="#888888" size="24"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="title">邮箱</view>
				<view class="right_cont">
					<u-input v-model="form.email" type="text" placeholder="请输入邮箱"/>
					<u-icon class="u-m-l-15" name="arrow-right" color="#888888" size="24"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="title">微信</view>
				<view class="right_cont">
					<u-input v-model="form.wx" type="text" placeholder="请输入微信"/>
					<u-icon class="u-m-l-15" name="arrow-right" color="#888888" size="24"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="title">QQ</view>
				<view class="right_cont">
					<u-input v-model="form.qq" type="text" placeholder="请输入QQ"/>
					<u-icon class="u-m-l-15" name="arrow-right" color="#888888" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="item">
				<view class="title">实名认证</view>
				<view class="right_cont">
					<text>未认证</text>
					<u-icon class="u-m-l-15" name="arrow-right" color="#888888" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="item">
				<view class="title">支付宝</view>
				<view class="right_cont">
					<text>未绑定</text>
					<u-icon class="u-m-l-15" name="arrow-right" color="#888888" size="24"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				background: {
					backgroundColor:"#4A90E2"
				},
				sex_show:false,//是否显示性别下拉
				form:{
					avatar:'../../static/img/face.jpg',//头像
					sex:'女',//性别
					name:'喵不可言',//昵称
					tel:'',//手机号
					email:'',//邮箱
					wx:'',//微信
					qq:'',//QQ
					
				},
				sexList: [
					{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			//返回
			black(){
				uni.navigateBack()
			},
			// 选择性别
			sexCallback(index) {
				this.form.sex = this.sexList[index].text;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo{
		min-height: 100vh;
		background-color: #f9f9f9;
		.header{
			padding: 0 30rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			view{
				color: #ffffff;
				line-height: 34px;
				font-weight: 400;
			}
			.title{
				font-size: 34rpx;
			}
			.ritbtn{
				font-size: 28rpx;
				
			}
		}
		.content{
			margin-bottom: 20rpx;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 36rpx 20rpx;
				background-color: #FFFFFF;
				// border-bottom: 1px solid #E6E6E6;
				.title{
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
				}
				.avatar{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				/deep/input,text{
					text-align: right;
					font-size: 28rpx;
					font-weight: 400;
					color: #888888;
				}
				.right_cont{
					display: flex;
					align-items: center;
				}
				&:last-child{
					border: 0;
				}
			}
		}
	}
</style>
